<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta name="viewport" content="width=320, user-scalable=0"/>
  <meta name="viewport" content="minimum-scale=1, maximum-scale=1"/>
  <script src="ianime029-all.js"></script>
  <style>
* {
margin: 0px;
padding: 0px;
}
body {
font: 10pt sans-serif;
}
.tile {
position: absolute;
background: #eeffff;
margin: 1pt;
width: 20pt;
height: 14pt;
text-align: center;
border-bottom: solid 1px gray;
border-right: solid 1px gray;
}
  </style>
  <script type="text/javascript">
var anime = new iAnime();

function myOver()
{
   this.style.zIndex = 2;
   anime.add({
       element:this,
       effect:'style',
       from: { background: '#eeffff', 'font-size':'10pt', 
               width:'20pt', height:'14pt', margin:'1pt', 'padding-top':'0pt' },
       to:   { background: '#80ffff', 'font-size':'14pt',
               width:'26pt', height:'20pt', margin:'-2pt', 'padding-top':'1pt' },
       duration: 200
   });
}

function myOut()
{
   var style = this.style;
   style.zIndex = 1;
   anime.add({
       element:this,
       effect:'style',
       from: { background: '#80ffff', 'font-size':'14pt',
             width:'26pt', height:'20pt', margin:'-2pt', 'padding-top':'1pt' },
       to: { background: '#eeffff', 'font-size':'10pt',
               width:'20pt', height:'14pt', margin:'1pt', 'padding-top':'0pt' },
       duration: 500,
       onComplete: function() { style.zIndex = 0; }
   });
}

function init()
{
    var keys = "QWERTYUIOPASDFGHJKL;ZXCVBNM<>?";
    var html = "";
    for (var i=0; i<keys.length; i++) {
       var ch = keys.charAt(i);
       html += "<div id='" + ch + "' class='tile'>" + ch + "</div>";
    }
    var div = document.getElementById("main");
    div.innerHTML = html;
    for (var i=0; i<keys.length; i++) {
       var ch = keys.charAt(i);
       div = document.getElementById(ch);
       div.style.top = (20+Math.floor(i/10)*20) + "px";
       div.style.left = (20+(i%10)*28+Math.floor(i/10)*10)+"px";
       div.onmouseover = myOver;
       div.onmouseout = myOut;
    }
}
  </script>
</head>
<body onload="init()">
  <div id="main">(loading...)</div>
</body>
</html>
